<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Widpy</title>
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 85%/1.3 TrebuchetMS,Arial,sans-serif;
    text-align: left;background: #fff;padding-bottom:20px}
a { color: #0066B3; background: inherit; text-decoration: none;}
h1 { font: bold 2.1em Arial, Arial, Sans-Serif; color: #036DA7 }
h2 { font: bold 1.1em Arial, Arial, Sans-Serif; padding: 0; margin: 0; }

div#header{width:100%;overflow:hidden;background: #BBD9EE; }
div#header h1,div#menu{width:770px;margin:0 auto;text-align:left}
div#header h1{padding: 30px 0 20px;color: #fff}

ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
ul#nav{float:right;font-size: 80%}
ul#nav li{float:left;margin-left: 3px;text-align: center}
ul#nav a{float:left;width: 95px;padding: 5px 0;background: #E7F1F8;text-decoration:none;color: #666; border-top : 1px solid #fff; border-left : 1px solid #fff; border-right : 1px solid #fff;}
ul#nav a:hover{background: #fff;color: #000}
ul#nav li.activelink a,ul#nav li.activelink a:hover{background: #FFF;color: #003}

#right {
	float: left;
	width: 76%;
	padding: 1em;
	margin-bottom: 1.2em;
	background: #eee;
	text-align: justify;
}

#left {
	float: right;
	width: 20%;
	margin: 0 0 10px 0;
	
}

#left .box {
	
	padding: 1em;
	margin: 0 0 1em 0;
	background : #FFF6BF;
}


#content {
font: 95%/1.3 TrebuchetMS,Arial,sans-serif;
	margin: 0 auto;
        padding: 15px;
	background: #fff;
	
	
}

ul {  padding: 0; margin: 0;}
li { list-style-type: none;}

.dragableBox{	/* The RSS box */
	background-color:#FFFFCC;
	margin:5px;
	border-right:2px solid #BBB;	/* "Shadow "*/
	border-bottom:2px solid #AAA;	/* "Shadow " */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
/* A div inside the rss box - with a blue border */
.dragableBoxInner{
	border:1px solid #317082;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.dragableBoxHeader{	/* Header inside RSS box */
	background-color:#1E679A;
	height:30px;
	font-weight:bold;
	color: #FFE773;
}
.dragableBoxHeader span{	/* Text inside header of RSS box */
	line-heigth:20px;
}
.dragableBoxHeader img,.dragableBoxHeader span{	/* Text and reload image inside RSS box */
	float:left;
}

.dragableBoxHeader input{
	font-size:11px;	
}


.dragableBoxContent{	/* DIV dragable boxes */
	padding:3px;
	clear:both;
}

#rectangleDiv{	/* border:2px dotted blue; */
	
	margin:5px;
}

.Button{	/* Close button */
	padding:3px;
	border:1px solid #317082;;
        font-size:8pt;
	line-height:6px;
	height:3px;
	margin:2px;
	color:#FFF;
	padding:2px;
	padding-bottom:3px;
        -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.Button_over{	/* Close button - mouse over */
	padding:3px;
	border:1px solid #317082;
        font-size:8pt;
	line-height:6px;
	padding:2px;
	padding-bottom:3px;
	margin:2px;	
	background-color:#33CCCC;
	color:#FFF;
        -moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.dragableBoxStatusBar{	/* Status bar at the bottom of rss boxes */
	border-top:5px double #317082;
	height:3px;
	background-color:#BBD9EE;
	padding:1px;
}

form{	/* No borders in forms */
	display:inline;
}

img{
	border:0px;
   } 

</style>
<script language="JavaScript" type="text/javascript">

// Number of columns for dragable boxes
var numberOfColumns=1;
var opcionCol=1;

var columnParentBoxId = 'right';	//para  mi Id=conten (la caja contenedora de todos los widgets)
var rightImage = 'rightarrow.gif';
var downImage = 'downarrow.gif';


var src_closeImage = 'button_cancel.gif';
var src_refreshSource = 'images/refresh.gif';
var src_smallRightArrow = 'images/small_arrow.gif';

var transparencyWhenDragging = false; //variable para la transparencian cuando se arrastra
var txt_editLink = 'Edit'; //editar caja
var txt_editLink_stop = 'End edit';
var autoScrollSpeed = 4;	// Autoscroll speed	- Higher = faster	
var dragObjectBorderWidth = 10;	// Border size of your RSS boxes - used to determine width of dotted rectangle

//cookies
var useCookiesToRememberRSSSources = true;

var nameOfCookie = 'dragable_rss_boxes';	// Name of cookie



var columnParentBox;
var dragableBoxesObj;

var ajaxObjects = new Array();

var boxIndex = 0;	
var autoScrollActive = false;
var dragableBoxesArray = new Array();

var dragDropCounter = -1;
var dragObject = false;
var dragObjectNextSibling = false;
var dragObjectParent = false;
var destinationObj = false;

var mouse_x;
var mouse_y;

var el_x;
var el_y;	

var rectangleDiv;
var okToMove = true;

var documentHeight = false;
var documentScrollHeight = false;
var dragableAreaWidth = false;
	
var opera = navigator.userAgent.toLowerCase().indexOf('opera')>=0?true:false;
var cookieCounter=0;


var staticObjectArray = new Array();

function autoScroll(direction,yPos)
{
	if(document.documentElement.scrollHeight>documentScrollHeight && direction>0)return;
	if(opera)return;
	window.scrollBy(0,direction);
	if(!dragObject)return;
	
	if(direction<0){
		if(document.documentElement.scrollTop>0){
			dragObject.style.top = (el_y - mouse_y + yPos + document.documentElement.scrollTop) + 'px';		
		}else{
			autoScrollActive = false;
		}
	}else{
		if(yPos>(documentHeight-50)){	
			dragObject.style.top = (el_y - mouse_y + yPos + document.documentElement.scrollTop) + 'px';			
		}else{
			autoScrollActive = false;
		}
	}
	if(autoScrollActive)setTimeout('autoScroll('+direction+',' + yPos + ')',5);
}

//inicia el arrastre de la caja	
function initDragDropBox(e)
{
	
	
	dragDropCounter = 1;
	if(document.all)e = event;
	
	if (e.target) source = e.target;
		else if (e.srcElement) source = e.srcElement;
		if (source.nodeType == 3) // defeat Safari bug
			source = source.parentNode;
	
	if(source.tagName.toLowerCase()=='img' || source.tagName.toLowerCase()=='a' || source.tagName.toLowerCase()=='input' || source.tagName.toLowerCase()=='td' || source.tagName.toLowerCase()=='tr' || source.tagName.toLowerCase()=='table')return;
	
	//evento del mouse
	mouse_x = e.clientX;
	mouse_y = e.clientY;	
	var numericId = this.id.replace(/[^0-9]/g,'');
	el_x = getLeftPos(this.parentNode.parentNode)/1;
	el_y = getTopPos(this.parentNode.parentNode)/1 - document.documentElement.scrollTop;
		
	dragObject = this.parentNode.parentNode;
	
	documentScrollHeight = document.documentElement.scrollHeight + 100 + dragObject.offsetHeight;
	
	
	if(dragObject.nextSibling){
		dragObjectNextSibling = dragObject.nextSibling;
		if(dragObjectNextSibling.tagName!='DIV')dragObjectNextSibling = dragObjectNextSibling.nextSibling;
	}
	dragObjectParent = dragableBoxesArray[numericId]['parentObj'];
		
	dragDropCounter = 0;
	initDragDropBoxTimer();	
	
	return false;
}


function initDragDropBoxTimer()
{
	if(dragDropCounter>=0 && dragDropCounter<10){
		dragDropCounter++;

		setTimeout('initDragDropBoxTimer()',10);
		return;
	}
	if(dragDropCounter==10){
		mouseoutBoxHeader(false,dragObject);
	}
	
}

//mover el elemento arrastrable
function moveDragableElement(e){
	if(document.all)e = event;
	if(dragDropCounter<10)return;
	
	if(document.all && e.button!=1 && !opera){
		stop_dragDropElement();
		return;
	}
	
	if(document.body!=dragObject.parentNode){

		var columnactual = dragObject.id.indexOf('dragableBoxesColumn')
  		var obj = document.getElementById(columnactual)

		dragObject.style.width = (dragObject.offsetWidth - (dragObjectBorderWidth*2)) + 'px';
		dragObject.style.position = 'absolute';	
		dragObject.style.textAlign = 'left';
		if(transparencyWhenDragging){	
			dragObject.style.filter = 'alpha(opacity=70)';
			dragObject.style.opacity = '0.7';
		}	
		dragObject.parentNode.insertBefore(rectangleDiv,dragObject);
		rectangleDiv.style.display='block';
		document.body.appendChild(dragObject);

		rectangleDiv.style.width = dragObject.style.width;
		rectangleDiv.style.height = (dragObject.offsetHeight - (dragObjectBorderWidth*2)) + 'px'; 
		
	}
	
	if(e.clientY<50 || e.clientY>(documentHeight-50)){
		if(e.clientY<50 && !autoScrollActive){
			autoScrollActive = true;
			autoScroll((autoScrollSpeed*-1),e.clientY);
		}
		
		if(e.clientY>(documentHeight-50) && document.documentElement.scrollHeight<=documentScrollHeight && !autoScrollActive){
			autoScrollActive = true;
			autoScroll(autoScrollSpeed,e.clientY);
		}
	}else{
		autoScrollActive = false;
	}		

	
	var leftPos = e.clientX;
	var topPos = e.clientY + document.documentElement.scrollTop;
	
	dragObject.style.left = (e.clientX - mouse_x + el_x) + 'px';
	dragObject.style.top = (el_y - mouse_y + e.clientY + document.documentElement.scrollTop) + 'px';
							

	
	if(!okToMove)return;
	okToMove = false;

	destinationObj = false;	
	rectangleDiv.style.display = 'none'; 
	
	var objFound = false;
	var tmpParentArray = new Array();
	
	if(!objFound){
		for(var no=1;no<dragableBoxesArray.length;no++){
			if(dragableBoxesArray[no]['obj']==dragObject)continue;
			tmpParentArray[dragableBoxesArray[no]['obj'].parentNode.id] = true;
			if(!objFound){
				var tmpX = getLeftPos(dragableBoxesArray[no]['obj']);
				var tmpY = getTopPos(dragableBoxesArray[no]['obj']);

				if(leftPos>tmpX && leftPos<(tmpX + dragableBoxesArray[no]['obj'].offsetWidth) && topPos>(tmpY-20) && topPos<(tmpY + (dragableBoxesArray[no]['obj'].offsetHeight/2))){
					destinationObj = dragableBoxesArray[no]['obj'];
					destinationObj.parentNode.insertBefore(rectangleDiv,dragableBoxesArray[no]['obj']);
					rectangleDiv.style.display = 'block';
					objFound = true;
					break;
					
				}
				
				if(leftPos>tmpX && leftPos<(tmpX + dragableBoxesArray[no]['obj'].offsetWidth) && topPos>=(tmpY + (dragableBoxesArray[no]['obj'].offsetHeight/2)) && topPos<(tmpY + dragableBoxesArray[no]['obj'].offsetHeight)){
					objFound = true;
					if(dragableBoxesArray[no]['obj'].nextSibling){
						
						destinationObj = dragableBoxesArray[no]['obj'].nextSibling;
						if(!destinationObj.tagName)destinationObj = destinationObj.nextSibling;
						if(destinationObj!=rectangleDiv)destinationObj.parentNode.insertBefore(rectangleDiv,destinationObj);
					}else{
						destinationObj = dragableBoxesArray[no]['obj'].parentNode;
						dragableBoxesArray[no]['obj'].parentNode.appendChild(rectangleDiv);
					}
					rectangleDiv.style.display = 'block';
					break;					
				}
				
				
				if(!dragableBoxesArray[no]['obj'].nextSibling && leftPos>tmpX && leftPos<(tmpX + dragableBoxesArray[no]['obj'].offsetWidth)
				&& topPos>topPos>(tmpY + (dragableBoxesArray[no]['obj'].offsetHeight))){
					destinationObj = dragableBoxesArray[no]['obj'].parentNode;
					dragableBoxesArray[no]['obj'].parentNode.appendChild(rectangleDiv);	
					rectangleDiv.style.display = 'block';	
					objFound = true;				
					
				}
			}
			
		}
	
	}
	
	if(!objFound){
		
		for(var no=1;no<=numberOfColumns;no++){
			if(!objFound){
				var obj = document.getElementById('dragableBoxesColumn' + no);			
				
					var left = getLeftPos(obj)/1;						
				
					var width = obj.offsetWidth;
					if(leftPos>left && leftPos<(left+width)){
						destinationObj = obj;
						obj.appendChild(rectangleDiv);
						rectangleDiv.style.display='block';
						objFound=true;		
						
					}				
				
			}
		}		
		
	}
	
	setTimeout('okToMove=true',5);
	
}

function stop_dragDropElement()
{
	
	if(dragDropCounter<10){
		dragDropCounter = -1
		return;
	}
	dragDropCounter = -1;
	if(transparencyWhenDragging){
		dragObject.style.filter = null;
		dragObject.style.opacity = null;
	}		
	dragObject.style.position = 'static';
	dragObject.style.width = null;
	var numericId = dragObject.id.replace(/[^0-9]/g,'');
	if(destinationObj && destinationObj.id!=dragObject.id){
		
		if(destinationObj.id.indexOf('dragableBoxesColumn')>=0){
			destinationObj.appendChild(dragObject);
			dragableBoxesArray[numericId]['parentObj'] = destinationObj;
		}else{
			destinationObj.parentNode.insertBefore(dragObject,destinationObj);
			dragableBoxesArray[numericId]['parentObj'] = destinationObj.parentNode;
		}


						
	}else{
		if(dragObjectNextSibling){
			dragObjectParent.insertBefore(dragObject,dragObjectNextSibling);	
		}else{
			dragObjectParent.appendChild(dragObject);
		}				
		
		
	}


	
	autoScrollActive = false;
	rectangleDiv.style.display = 'none'; 
	dragObject = false;
	dragObjectNextSibling = false;
	destinationObj = false;
	
	

	documentHeight = document.documentElement.clientHeight;	
}


function getTopPos(inputObj)
{		
  var returnValue = inputObj.offsetTop;
  while((inputObj = inputObj.offsetParent) != null){
	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
  }
  return returnValue;
}

function getLeftPos(inputObj)
{
  var returnValue = inputObj.offsetLeft;
  while((inputObj = inputObj.offsetParent) != null){
	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
  }
  return returnValue;
}
	
//funcion que crea las columnas
function createColumns()
{
	if(!columnParentBoxId){
		alert('No parent box defined for your columns');
		return;
	}
	columnParentBox = document.getElementById(columnParentBoxId);
	
	if(numberOfColumns==3 && opcionCol==2){
		var columnWidth = Math.floor(50/(numberOfColumns-1));
		var auxWidth = columnWidth ;
	}
	if(opcionCol==1 && (numberOfColumns==3 || numberOfColumns==2 || numberOfColumns==3) ){
		var columnWidth = Math.floor(100/numberOfColumns);
	}
	var sumWidth = 0;
	if(numberOfColumns==3 && opcionCol==1){
	    for(var no=0;no<numberOfColumns;no++){
			if(no==(numberOfColumns-1))columnWidth = 99 - sumWidth;
			sumWidth = sumWidth + columnWidth;
			
			var div = document.createElement('DIV');
			div.style.cssText = 'float:left;width:'+columnWidth+'%;padding:0px;margin:0px;';
			div.style.height='100%';
			div.style.styleFloat='left';
			div.style.width = columnWidth + '%';
			div.style.padding = '0px';
			div.style.margin = '0px';

			div.id = 'dragableBoxesColumn' + (no+1);
			columnParentBox.appendChild(div);
			
			var clearObj = document.createElement('HR');	
			clearObj.style.clear = 'both';
			clearObj.style.visibility = 'hidden';
			div.appendChild(clearObj);
		
		}
	}else{
		for(var no=0;no<numberOfColumns;no++){
		    switch(numberOfColumns){
				case 2: if(opcionCol==2){
				          if(no==0)columnWidth=40;
						  else columnWidth=60;
				        }
						if(opcionCol==3){
						  if(no==0)columnWidth=60;
						  else columnWidth=40;
						}
						break;
				case 3: if(no==1 && opcionCol==2)columnWidth=50;
						else columnWidth=auxWidth;
						break;
			}
			
			if(no==(numberOfColumns-1) && opcionCol==1)columnWidth = 99 - sumWidth;
			sumWidth = sumWidth + columnWidth;
			
			var div = document.createElement('DIV');
			div.style.cssText = 'float:left;width:'+columnWidth+'%;padding:0px;margin:0px;';
			div.style.height='100%';
			div.style.styleFloat='left';
			div.style.width = columnWidth + '%';
			div.style.padding = '0px';
			div.style.margin = '0px';

			div.id = 'dragableBoxesColumn' + (no+1);
			columnParentBox.appendChild(div);
			
			var clearObj = document.createElement('HR');	
			clearObj.style.clear = 'both';
			clearObj.style.visibility = 'hidden';
			div.appendChild(clearObj);
		
		}
	
	}
	
	var clearingDiv = document.createElement('DIV');
	columnParentBox.appendChild(clearingDiv);
	clearingDiv.style.clear='both';
	
}

//mouse sobre la cabecera de la caja
function mouseoverBoxHeader()
{
	if(dragDropCounter==10)return;
	var id = this.id.replace(/[^0-9]/g,'');
	document.getElementById('dragableBoxExpand' + id).style.visibility = 'visible';		
	document.getElementById('dragableBoxShareSource' + id).style.visibility = 'visible';		
	document.getElementById('dragableBoxCloseLink' + id).style.visibility = 'visible';
	
}

//mouse fuera de la cabecera de la caja
function mouseoutBoxHeader(e,obj)
{
	if(!obj)obj=this;
	
	var id = obj.id.replace(/[^0-9]/g,'');
	document.getElementById('dragableBoxExpand' + id).style.visibility = 'hidden';		
	document.getElementById('dragableBoxShareSource' + id).style.visibility = 'hidden';		
	document.getElementById('dragableBoxCloseLink' + id).style.visibility = 'hidden';			
	
}

function refreshRSS()
{
	reloadRSSData(this.id.replace(/[^0-9]/g,''));
	setTimeout('dragDropCounter=-5',5);
}

function showHideBoxContent(e,inputObj)
{
	if(document.all)e = event;
	if(!inputObj)inputObj=this;
	
	var numericId = inputObj.id.replace(/[^0-9]/g,'');
	var obj = document.getElementById('dragableBoxContent' + numericId);
	
	obj.style.display = inputObj.src.indexOf(rightImage)>=0?'none':'block';
	inputObj.src = inputObj.src.indexOf(rightImage)>=0?downImage:rightImage;
	
	dragableBoxesArray[numericId]['boxState'] = obj.style.display=='block'?1:0;
	//saveCookies();
	setTimeout('dragDropCounter=-5',5);
}

//mouse sobre el boton cerrar
function mouseover_Button()
{
	this.className = 'Button_over';	
	setTimeout('dragDropCounter=-5',5);
}


//mouse fuera del botton cerrar
function mouseout_Button()
{
	this.className = 'Button';	
}

//cierrar la caja arrastrable
function closeDragableBox(e,inputObj)
{
      if(confirm(" Esta seguro que desea eliminar?")){

	 if(!inputObj)inputObj = this;
	 var numericId = inputObj.id.replace(/[^0-9]/g,'');
	 document.getElementById('dragableBox' + numericId).style.display='none';	

       }

	setTimeout('dragDropCounter=-5',5);
	
}

function editContent()
{
	var numericId = this.id.replace(/[^0-9]/g,'');
	var obj = document.getElementById('dragableBoxEdit' + numericId);
	if(obj.style.display=='none'){
		obj.style.display='block';
		this.innerHTML = txt_editLink_stop;
		document.getElementById('dragableBoxHeader' + numericId).style.height = '135px';
	}else{
		obj.style.display='none';
		this.innerHTML = txt_editLink;
		document.getElementById('dragableBoxHeader' + numericId).style.height = '20px';
	}
	setTimeout('dragDropCounter=-5',5);
}


function addBoxHeader(parentObj,nombreWidget,uniqueIdentifier)
{
	var div = document.createElement('DIV');
	div.className = 'dragableBoxHeader';
	
	div.id = 'dragableBoxHeader' + boxIndex;
	div.onmouseover = mouseoverBoxHeader;
	div.onmouseout = mouseoutBoxHeader;
	div.onmousedown = initDragDropBox;
	div.style.cursor = 'move';
	
	var image = document.createElement('IMG');
	image.id = 'dragableBoxExpand' + boxIndex;
	//image.src = rightImage;
        image.innerHTML = '>';
        image.className = 'Button';
	image.style.visibility = 'hidden';
        image.onmouseover = mouseover_Button;
	image.onmouseout = mouseout_Button;	
	image.style.cursor = 'pointer';
	image.onmousedown = showHideBoxContent;	
	div.appendChild(image);

	var textSpan = document.createElement('SPAN');
	textSpan.id = 'dragableBoxHeader_txt';
	textSpan.innerHTML = nombreWidget;
	div.appendChild(textSpan);
			
	parentObj.appendChild(div);	

	var closeLink = document.createElement('A');
	closeLink.style.cssText = 'float:right';
	closeLink.style.styleFloat = 'right';
	closeLink.id = 'dragableBoxCloseLink' + boxIndex;
	closeLink.innerHTML = 'x';
	closeLink.className = 'Button';
	closeLink.onmouseover = mouseover_Button;
	closeLink.onmouseout = mouseout_Button;
	closeLink.style.cursor = 'pointer';
	closeLink.style.visibility = 'hidden';
	closeLink.onmousedown = closeDragableBox;
	div.appendChild(closeLink);

	var shareLink = document.createElement('A');
	shareLink.id = 'dragableBoxShareSource' + boxIndex;
        shareLink.href = '?b='+ uniqueIdentifier +''
        shareLink.innerHTML = 'Compartir';
	shareLink.style.cssText = 'float:right';
	shareLink.style.styleFloat = 'right';
	shareLink.style.visibility = 'hidden';
        shareLink.className = 'Button';
	shareLink.onmouseover = mouseover_Button;
	shareLink.onmouseout = mouseout_Button;
	shareLink.style.cursor = 'pointer';
	div.appendChild(shareLink);

}

function addBoxContentContainer(parentObj,widgetUrl,heightOfBox)
{
	var div = document.createElement('DIV');
	div.className = 'dragableBoxContent';
	if(opera)div.style.clear='none';
	div.id = 'dragableBoxContent' + boxIndex;	
        div.innerHTML = '<embed style="" src="' + widgetUrl + '" type="application/x-shockwave-flash" height="' + heightOfBox + '" width="100%" align="center"><param name=wmode value=transparent></embed>';
	parentObj.appendChild(div);			
	if(heightOfBox && heightOfBox/1>40){
		div.style.height = heightOfBox + 'px';		
		div.setAttribute('heightOfBox',heightOfBox);
		div.heightOfBox = heightOfBox;	
		if(document.all)div.style.overflowY = 'auto';else div.style.overflow='-moz-scrollbars-vertical;';
		if(opera)div.style.overflow='auto';
	}		
}

function addBoxStatusBar(parentObj)
{
	var div = document.createElement('DIV');
	div.className = 'dragableBoxStatusBar';
	div.id = 'dragableBoxStatusBar' + boxIndex;
	parentObj.appendChild(div);	
	
	
}

function createABox(columnIndex,heightOfBox,widgetUrl,nombreWidget,uniqueIdentifier)
{
	boxIndex++;
	
	var maindiv = document.createElement('DIV');
	maindiv.className = 'dragableBox';
	maindiv.id = 'dragableBox' + boxIndex;
	
	var div = document.createElement('DIV');
	div.className='dragableBoxInner';
	maindiv.appendChild(div);
	
	
	addBoxHeader(div,nombreWidget,uniqueIdentifier);
	addBoxContentContainer(div,widgetUrl,heightOfBox);
	addBoxStatusBar(div);
	
	var obj = document.getElementById('dragableBoxesColumn' + columnIndex);		
	var subs = obj.getElementsByTagName('DIV');
	if(subs.length>0){
		obj.insertBefore(maindiv,subs[0]);
	}else{
		obj.appendChild(maindiv);
	}
	
	dragableBoxesArray[boxIndex] = new Array();
	dragableBoxesArray[boxIndex]['obj'] = maindiv;
	dragableBoxesArray[boxIndex]['parentObj'] = maindiv.parentNode;
	dragableBoxesArray[boxIndex]['uniqueIdentifier'] = uniqueIdentifier;
	dragableBoxesArray[boxIndex]['heightOfBox'] = heightOfBox;
	dragableBoxesArray[boxIndex]['boxState'] = 1;	// expandido
	
	staticObjectArray[uniqueIdentifier] = boxIndex;
	
	return boxIndex;
}


function createHelpObjects()
{
	/* rectangulo div */
	rectangleDiv = document.createElement('DIV');
	rectangleDiv.id='rectangleDiv';
	rectangleDiv.style.display='none';
	document.body.appendChild(rectangleDiv);
	
	 
}

function cancelSelectionEvent(e)
{
	if(document.all)e = event;
	
	if (e.target) source = e.target;
		else if (e.srcElement) source = e.srcElement;
		if (source.nodeType == 3) // defeat Safari bug
			source = source.parentNode;
	if(source.tagName.toLowerCase()=='input')return true;
					
	if(dragDropCounter>=0)return false; else return true;	
	
}

function cancelEvent()
{
	return false;
}

function initEvents()
{
	document.body.onmousemove = moveDragableElement;
	document.body.onmouseup = stop_dragDropElement;
	document.body.onselectstart = cancelSelectionEvent;

	document.body.ondragstart = cancelEvent;	
	
	documentHeight = document.documentElement.clientHeight;	
	
}


/* Eliminas todas las cajas */

function eliminarAllbox()
{
	var divs = document.getElementsByTagName('DIV');
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='dragableBox')closeDragableBox(false,divs[no]);	
	}
		
}

function eliminarAllColumn()
{
	var divs = document.getElementsByTagName('DIV');
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='dragableBox')closeDragableBox(false,divs[no]);	
	}
		
}


/* Reset back to default settings */

function hideHeaderOptionsForStaticBoxes(boxIndex)
{
	if(document.getElementById('dragableBoxRefreshSource' + boxIndex))document.getElementById('dragableBoxRefreshSource' + boxIndex).style.display='none';
	if(document.getElementById('dragableBoxCloseLink' + boxIndex))document.getElementById('dragableBoxCloseLink' + boxIndex).style.display='none';		
	if(document.getElementById('dragableBoxEditLink' + boxIndex))document.getElementById('dragableBoxEditLink' + boxIndex).style.display='none';		
}



/* Carga los datos necesario para contener los widget */
function cargarDatosWidget()
{				
			
	{% for each in items %}  
		var newIndex = createABox('{{ each.nrocolumna }}','{{ each.altura }}','{{ each.widget.url }}','{{ each.widget.nombre_widget }}','{{ each.widget.id }}');
        {% endfor %}
	
}


function initDragableBoxesScript()
{
	numberOfColumns={{ cantidadcolumna }};
	opcionCol={{ modelo }};

	createColumns();	// Crea las columnas necesarias que contendra los contenedores o cajas para cada widget
	createHelpObjects();	
	initEvents();	//Inicia los eventos que hacen posible el arrastre de las cajas
	
	cargarDatosWidget();	// Carga los valores contenidos en la BD


	
}
window.onload = initDragableBoxesScript;

</script>

</head>
<body>
<div id="header">
<h1>Widpy</h1>
 <div id="menu">
  <ul id="nav">
   {% for idpest in idpestanha %}
     <li><a href="?p_id={{ idpest.id }}" id="/refreshpestanha/">{{ idpest.nombre }} </a></li>
   {% endfor %}
  </ul>
 </div>
</div>
<div id="content">
<div id="right">
</div>

<div id="left">
	<div class="box">
			<h2>Buscar, agregar, etc...</h2>
			<p></p>
	</div>

	<div class="box">
			<h2>Configuracion...</h2>
			<p></p>
	</div>

    <div class="box">
	   <div style="font-size: 0.8em;">Design by UC</a></div>
	</div>
</div>
</div>
</body>
</html>
